<template>
  <!-- <div
    :style="{
      borderStyle: 'double',
      borderWidth: '12px',
      borderColor: '#2c3e50',
      boxSizing: 'border-box',
      width: '100%',
      height: '100%',
    }"
  > -->
  <div
    :style="{
      overflow: 'auto',
      height: `${innerHeight}px`,
      width: `${innerWidth}px`,
    }"
  >
    <n-space vertical>
      <n-code
        :code="`
/**
* 生成类型：${preview.type}
* 生成文件：${preview.name}
* 模板路径：${preview.path}
*/
      `"
        language="java"
      />
      <n-code :code="`${code}`" language="java" />
    </n-space>
  </div>
  <!-- </div> -->
</template>

<script>
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { ref, computed, watch } from "vue";
import useWindowSize from "../composables/useWindowSize";
import useTemplateRepositories from "../composables/useTemplateRepositories";

export default {
  name: "VGPreviewContent",
  props: {},
  setup() {
    const code = ref("");

    const store = useStore();

    const router = useRouter();

    const linkId = ref(router.currentRoute.value.query.linkId);
    const tableId = ref(router.currentRoute.value.query.tableId);

    const { templateCode, getTemplateCode } = useTemplateRepositories(
      linkId,
      tableId
    );

    const preview = computed(() => store.state.preview);

    const { innerHeight, innerWidth } = useWindowSize();

    watch(store.state.preview, async () => {
      await getTemplateCode(preview.value.type, preview.value.id);
      code.value = templateCode.value;
    });

    return {
      code,
      preview,
      innerHeight,
      innerWidth,
      getTemplateCode,
    };
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss"></style>
